<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- 引入boostrap -->
		<link rel="stylesheet" href="./css/bootstrap.min.css" />
		<!-- 引入动画库 -->
		<link rel="stylesheet" href="./css/animate.min.css" />
		<!-- 引入重置样式文件 -->
		<link rel="stylesheet/less" href="./css/reset.less" />
		<!-- 引入公共样式 -->
		<link rel="stylesheet/less" href="./css/common.less"/>
		<!-- 引入首页的样式 -->
		<link rel="stylesheet/less" href="./css/index.less"/>
		
	</head>
	<body>
		<div class="index">
			<div class="test">
				<div>首页</div>
				<div><img src="images/搜索.png" ></div>
			</div>
		
		<!-- 轮播图 -->
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
				<!-- Indicators -->
				<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				</ol>
			
				<!-- Wrapper for slides -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img src="./images/轮播素材.png" alt="">
						<div class="carousel-caption">
						</div>
					</div>
					<div class="item">
						<img src="./images/轮播素材.png" alt="">
						<div class="carousel-caption">
							
						</div>
					</div>
				</div>
			
				<!-- Controls -->
				<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		
		<!-- 图标 -->
			<div class="Icon">
				<div class="img"><img src="./images/百科.png" ><span>宠物百科</span></div>
				<div class="img"><img src="./images/领养.png" ><span>宠物百科</span></div>
				<div class="img"><img src="./images/装备.png" ><span>宠物百科</span></div>
				<div class="img"><img src="./images/宠物.png" ><span>宠物百科</span></div>
			</div>
		<!-- 明星宠物 -->
			<div class="starpet">
				<p>明星宠物</p>
				<div class="pet">
					<div class="img-1">
						<img class="iti" src="images/皇冠1.png" />
						<div class="sta">
							<img src="images/dog1.png" >
							<div class="title">
								moxmox >>
							</div>
						</div>
					</div>
					<div class="img-1">
						<img class="iti" src="images/皇冠2.png" />
						<div class="sta">
							<img src="images/catting2.png" >
							<div class="title">
						</div>
						</div>
					</div>
					<div class="img-1">
						<img class="iti" src="images/皇冠3.png" />
						<div class="sta">
							<img src="images/dog3.png" >
							<div class="title">
						</div>
						</div>
					</div>
					<div class="img-1">
						<div class="sta">
							<img src="images/dog4.png" >
							<div class="title">
						</div>
						</div>
					</div>
				</div>
			</div>
		
		<!-- 今日推荐 -->
			<div class="recommend">
				<div class="tit">
					今日推荐
				</div>
				<div class="img-2">
					<div>
						<p>今日推荐</p>
						<img src="images/推荐1.png">
						<div class="title">
							moxmox >>
						</div>
					</div>
					<div>
						<img src="images/推荐2.png">
						<div class="title">
							moxmox >>
						</div>
					</div>
					<div>
						<img src="images/推荐3.png">
						<div class="title">
							moxmox >>
						</div>
					</div>
					<div>
						<img src="images/推荐4.png">
						<div class="title">
							moxmox >>
						</div>	
					</div>
					<div>
						<img src="images/推荐5.png">
						<div class="title">
							moxmox >>
						</div>
					</div>
				</div>
			</div>
			<!-- 导航头 -->
			<div class="Guidance">
				<div class="First">
					<div class="div_1">
						<div><img src="images/下导航头1.png" ></div>
						<p>首页</p>
					</div>
					<div class="div_1">
						<div><img src="images/下导航头2.png" ></div>
						<p>首页</p>
					</div>
					<div class="div_1">
						<div><img src="images/下导航头3.png" ></div>
						<p>首页</p>
					</div>
					<div class="div_1">
						<div><img src="images/下导航头4.png" ></div>
						<p>首页</p>
					</div>
				</div>
				
			</div>
		
		</div>
	</body>
</html>
<!-- 引入jquery -->
<script src="./js/jquery.min.js"></script>

<!-- 引入bootstrap -->
<script src="./js/bootstrap.min.js"></script>

<!-- 引入解析less的插件 -->
<script src="./js/less.min.js"></script>

<!-- 引入懒加载的插件 -->
<script src="./js/wow.min.js"></script>
